<template>
	<view class="page">
		<!-- 轮播图 start -->
		<swiper class="carousel" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000">
			<swiper-item v-for="(item,index) in slideshow" :key="index">
				<image :src="item.image" class="carousel" /></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图 end -->
		
		<!-- 热门超音 start -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/hot.png" class="hot-ico"></image>
				<view class="hot-title">
					热门超音
				</view>
			</view>
			<scroll-view scroll-x="true" class="hot">
				<view class="single-poster" v-for="(item,index) in hotSuperheroList" :key="index">
					<view class="poster-wapper">
						<image class="poster" :src="item.cover"></image>
						<view class="movie-name">
							{{item.name}}
						</view>
					</view>
					<trailerStars :innerScore="item.score" showNum="1"></trailerStars>
				</view>
			</scroll-view>
		</view>
		<!-- 热门超音 start -->
		
		<!-- 热门预告 start -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/interest.png" class="hot-ico"></image>
				<view class="hot-title">
					热门预告
				</view>
			</view>
			<view class="hot-movies page-block">
				<video :id="item.id" :data-palyintIndex="item.id" @play="meIsPlaying" v-for="(item,index) in trailerlist" :key="index" :src="item.trailer" :poster="item.poster" class="hot-movie-single" controls></video>
			</view>
		</view>
		<!-- 热门预告 end -->
		
		<!-- 猜你喜欢 start -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/guess-u-like.png" class="hot-ico"></image>
				<view class="hot-title">
					猜你喜欢
				</view>
			</view>
		</view>
		<view class="page-block guess-u-like">
			<view class="single-like-movie" v-for="(item,index) in guessULikeData" :key="index">
				<image class="like-movie" :src="item.cover"></image>
				<view class="movie-desc">
					<view class="movie-title">{{item.name}}</view>
					<trailerStars :innerScore="9.1" showNum="1"></trailerStars>
					<view class="movie-info">{{item.basicInfo}}</view>
					<view class="movie-info">{{item.releaseDate}}</view>
				</view>
				<!-- #ifndef H5 -->
				<view class="movie-oper">
					<view :data-index="index" @click="praiseMe">
						<image src="../../static/icos/praise.png" class="praise-ico"></image>
						<view class="praise-me">
							点赞
						</view>
					</view>
					<view :animation="animationDataArr[index]" class="praise-me animation-option">
						+1
					</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<!-- 猜你喜欢 end -->
	</view>
</template>

<script>
	import trailerStars from '../../component/trailerStars.vue'
	
	export default {
		data() {
			return {
				slideshow:[],//轮播图
				hotSuperheroList:[],//热门超音
				trailerlist:[],//热门预告
				animationData:{}, //动画
				animationDataArr: [
					{}, {}, {}, {}, {}
				],
				guessULikeData:[],//猜你喜欢
				
			}
		},
		onLoad() {
			//#ifndef H5
			// 在页面创建的时候,创建一个临时动画对象
			this.animation = uni.createAnimation();
			//#endif
			
			this.slideshow_m();
			this.seachlsit();
			this.trailer();
			this.guessULike();
		},
		onUnload() {
			//#ifndef H5
			//页面卸载的时候清楚动画数据
			// 页面卸载的时候，清除动画数据
			this.animationData = {};
			this.animationDataArr = [
				{}, {}, {}, {}, {}
			];
			//#endif
		},
		onHide() {
			if(this.videoContext){
				//离开页面的时候
				this.videoContext.pause();//暂停播放
			}
		},
		//监听页面下拉刷新
		onPullDownRefresh(){
			this.guessULike();
		},
		methods: {
			//轮播
			slideshow_m(){
				uni.request({
				    url: this.serverUrl+'/index/carousel/list'+this.user_authority, //仅为示例，并非真实接口地址。
				    method:"POST",
				    success: (res) => {
						//判断请求状态
						if(res.data.status == 200){
							this.slideshow = res.data.data;
						}
				    }
				});
			},
			//查询热门超音
			seachlsit(){
				uni.request({
					url:this.serverUrl + '/index/movie/hot' + this.user_authority+'&type=superhero',
					method:"POST",
					success: (res) => {
						if(res.data.status == 200){
							this.hotSuperheroList = res.data.data;
						}
					}
				})
			},
			//查询热门预告
			trailer(){
				uni.request({
					url:this.serverUrl + '/index/movie/hot' + this.user_authority+'&type=trailer',
					method:"POST",
					success: (res) => {
						if(res.data.status == 200){
							this.trailerlist = res.data.data;
						}
					}
				})
			},
			//实现点赞动画效果
			praiseMe(e){
				let index = e.currentTarget.dataset.index; //下标
				
				//#ifndef H5
				//构建动画数据,并且通过step 表示动画的完成
				this.animation.translateY(-60).opacity(1).step({duration:400});
				//导出动画数据的view组件，实现组件的动画数据
				this.animationData = this.animation;
				this.animationDataArr[index] = this.animationData.export();
				
				//还原动画
				setTimeout(()=> {
					this.animation.translateY(0).opacity(0).step({duration:0});
					//导出动画数据的view组件，实现组件的动画数据
					this.animationData = this.animation;
					this.animationDataArr[index] = this.animationData.export();
				}, 500);
				//#endif
			},
			//猜你列表喜欢数据
			guessULike(){
				uni.showLoading({mask:true});//显示 loading 提示框
				uni.showNavigationBarLoading();//在当前页面显示导航条加载动画
				
				uni.request({
					url:this.serverUrl + '/index/guessULike' + this.user_authority,
					method:"POST",
					success: (res) => {
						if(res.data.status == 200){
							this.guessULikeData = res.data.data;
						}
					},
					complete:()=>{
						uni.stopPullDownRefresh();//停止下拉刷新
						uni.hideNavigationBarLoading();//隐藏页面导航条加载动画
						uni.hideLoading();//隐藏 loading 提示框
					}
				})
			},
			//播放一个视频的时候需要暂停其它正在播放的视频
			meIsPlaying(e){
				let trailerId = "";
				if(e){
					trailerId = e.currentTarget.dataset.palyintindex; 
					//创建并返回 video 上下文 videoContext 对象
					this.videoContext = uni.createVideoContext(trailerId);
				}
				let trailerlist = this.trailerlist;
				for (let item in trailerlist) {
					let tempId = trailerlist[item].id;
					//判断是否当前点击的id 如果不是就暂停播放
					if(tempId != trailerId){
						uni.createVideoContext(tempId).pause();
					}
				}
			}
		},
		components:{
			trailerStars
		}
	}
</script>

<style>
	@import url("index.css");
</style>
